<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城登录</title>

        <style type="text/css">
            body { margin : 0 ; padding : 0 ; }
            .header { border: 1px solid blue ;  }
            /* 后代选择器 */
            .header .logo { width: 1130px ; height: 98px ; margin: auto ; background-color: #FFFF00 ;  }

            .wrapper { border: 2px solid red ; height: 500px ; }
            .wrapper .link {
                display: block ; /* 让 a 元素变成 块元素 */
                width: 100% ;
                height: 500px ;
                background-image: url("redmi.jpg");
                background-repeat: no-repeat;
                background-position: center ;
            }

            .wrapper .sign-in-form {
                width: 25% ;
                height: 400px ;
                background-color: #ffffff;
                margin-left: 62.5%;
                margin-top: -400px ;
            }
        </style>

    </head>
    <body>

        <div class="header">
            <div class="logo"></div>
        </div>

        <div class="wrapper">
            <a href="http://www.mi.com" class="link"></a>
            <div class="sign-in-form"></div>
        </div>


    </body>
</html>